<template>
    <div class="device-detail">
        <Tabs type="card" :animated="false" :value="currentTab" @on-click="handleTabChange">
            <TabPane
                v-for="menu in shouldShowMenus"
                :key="menu.activeTab"
                :label="menu.name"
                :name="menu.activeTab">
                <component
                    v-if="menu.loaded"
                    device-type="face-access"
                    :device-info="device"
                    :room="device"
                    :device-id="device.id" 
                    :operate-type="operationType"
                    :unnormal-type="operationType"
                    :home-id="homeId"
                    :room-id="device.room_id"
                    :is="menu.component"
                    @reload="handleReload">
                </component>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    import util from '@/libs/util'
import { DeviceTypeEnum } from '@/libs/const'
import deviceInfo from './device-info'
import faceAccess from './face-access'
import m3OpenHistory from './m3-open-history'
import m3AuthHistory from './m3-auth-history'
import operationHistory from '../roomOperate'
import exceptionHistory from '../roomUnnormal'
import accessAuthHistory from './access-auth-history'
import accessOpenHistory from '../tabs//access-open-history'
import openapiLog from '../../log/openapi-log'

export default {
      name: 'device-detail',
      components: {
        deviceInfo,
        faceAccess,
        m3OpenHistory,
        m3AuthHistory,
        operationHistory,
        exceptionHistory,
        accessAuthHistory,
        accessOpenHistory,
        openapiLog
      },
      props: {
        homeId: Number,
        device: Object
      },
      computed: {
        permissions () {
          if (localStorage.permission) {
            return JSON.parse(localStorage.permission)
          } else {
            return {}
          }
        },
        // 操作记录的类型名
        operationType () {
          if (!this.device.device_type) return ''
          return DeviceTypeEnum.properties[this.device.device_type].type
        },
        shouldShowMenus () {
          return this.menus.filter(menu => {
            const baseRule = this.inspectDeviceCanShowMenu(menu.requiredDevices) && (!menu.permissions || this.permissions[menu.permission])
            if (menu.activeTab === 'authCode') return baseRule && this.hasAuthCode
            return baseRule
          })
        },
        shouldShowMenusComponent () {
          return this.menus.filter(menu => {
            return menu.loaded && this.inspectDeviceCanShowMenu(menu.requiredDevices)
          })
        },
        hasAuthCode () { // 是否是D3或者T3门锁
          if (!this.device) return false
          const { sn } = this.device
          const res = util.sn2model(sn)
          return [ 'T3', 'D3' ].includes(res.device)
        }
      },
      data () {
        return {
          menus: [
            {
              component: 'deviceInfo',
              loaded: true,
              activeTab: 'info',
              requiredDevices: 'access_control',
              name: '设备信息'
            },
            {
              component: 'faceAccess',
              loaded: true,
              activeTab: 'info',
              requiredDevices: 'face_access',
              name: '设备信息'
            },
            {
              component: 'm3AuthHistory',
              loaded: false,
              activeTab: 'm3AuthHistory',
              requiredDevices: 'access_control',
              name: '授权记录'
            },
            {
              component: 'm3OpenHistory',
              loaded: false,
              activeTab: 'm3OpenHistory',
              requiredDevices: 'access_control',
              name: '开门记录'
            },
            {
              component: 'accessAuthHistory',
              loaded: false,
              activeTab: 'accessAuthHistory',
              requiredDevices: 'face_access',
              name: '授权记录'
            },
            {
              component: 'accessOpenHistory',
              loaded: false,
              activeTab: 'accessOpenHistory',
              requiredDevices: 'face_access',
              name: '开门记录'
            },
            // {
            //     component: 'authHistory',
            //     loaded: false,
            //     activeTab: 'authHistory',
            //     requiredDevices: 'lock',
            //     name: '授权记录',
            //     permission: 28
            // },
            // {
            //     component: 'connectedDevices',
            //     loaded: false,
            //     activeTab: 'connectedDevices',
            //     requiredDevices: {
            //         model: [ 'me-13' ],
            //         devices: 'gateway,elecollector,watergateway'
            //     },
            //     name: '关联设备'
            // },
            // {
            //     component: 'lockHistory',
            //     loaded: false,
            //     activeTab: 'lockHistory',
            //     requiredDevices: 'face_access',
            //     name: '开关记录'
            // },
            // {
            //     component: 'lockPowerHistory',
            //     loaded: false,
            //     activeTab: 'lockPowerHistory',
            //     requiredDevices: 'lock',
            //     name: '电量曲线',
            //     icon: 'alert-circled'
            // },
            // {
            //     component: 'authCode',
            //     loaded: false,
            //     activeTab: 'authCode',
            //     requiredDevices: 'lock',
            //     name: '功能码'
            // },
            // {
            //     component: 'elemeterHistory',
            //     loaded: false,
            //     activeTab: 'elemeterHistory',
            //     requiredDevices: 'elemeter',
            //     name: '屏显读数'
            // },
            // {
            //     component: 'waterHistory',
            //     loaded: false,
            //     activeTab: 'waterHistory',
            //     requiredDevices: 'watermeter_cold,watermeter_hot',
            //     name: '水表读数'
            // },
            {
              component: 'operationHistory',
              loaded: false,
              activeTab: 'operationHistory',
              requiredDevices: null,
              name: '操作记录',
              permission: 18
            },
            {
              component: 'exceptionHistory',
              loaded: false,
              activeTab: 'exceptionHistory',
              requiredDevices: null,
              name: '异常记录'
            },
            {
              component: 'openapiLog',
              loaded: false,
              activeTab: 'openapiLog',
              requiredDevices: null,
              name: '第三方接口调用记录'
            }
          ],
          currentTab: 'info'
        }
      },
      methods: {
        inspectDeviceCanShowMenu (requiredDevices) {
          if (!requiredDevices) return true
          if (typeof requiredDevices === 'object') {
            return this.showItem(requiredDevices.devices) || requiredDevices.model.includes(this.device.model)
          }
          return this.showItem(requiredDevices)
        },
        watchTab (tabName, deviceId) {
          if (this.device.id === deviceId) {
            const index = this.menus.findIndex(menu => menu.activeTab === tabName)
            if (!this.menus[index].loaded) {
              this.$set(this.menus[index], 'loaded', true)
            }
            this.currentTab = tabName
          }
        },
        handleTabChange (name) {
          const index = this.menus.findIndex(menu => menu.activeTab === name)
          if (!this.menus[index].loaded) {
            this.$set(this.menus[index], 'loaded', true)
          }
          this.currentTab = name
        },
        showItem (names) {
          const items = names.split(',')
          let hasItem = false
          items.forEach(item => {
            const type = DeviceTypeEnum[item.toUpperCase()]
            if (this.device.device_type === type) hasItem = true
          })
          return hasItem
        },
        handleReload () {
          const index = this.menus.findIndex(menu => menu.activeTab === this.currentTab)
          this.$set(this.menus[index], 'loaded', false)
          this.$nextTick(() => {
            this.$set(this.menus[index], 'loaded', true)
          })
        }
      }
    }
</script>

<style lang="less" scoped>
    .device-detail{
        position: relative;

        .ivu-menu-item{
            padding-left: 25px!important;
        }
        .ivu-tabs-tab{
            background-color: #d5d5d5!important;
        }
        .ivu-tabs-tab.ivu-tabs-tab-active{
            background-color: #fff!important;
            border: 0!important;
        }
        .ivu-tabs-content>.ivu-tabs-tabpane{
            background-color: #fff!important;
        }
    }
    .ivu-tabs-tabpane > div {
        visibility: visible !important;
    }
</style>